<template>
	<view>
		<view class="bgw">
			<view class="item">
				<view class="flex">
					<view class="flex-1 font-bold">
						{{detail.dinner_type_name}}
					</view>
					<view class="" style="width: 60px">
						<view class="flex" style="justify-content: flex-end;">
							<picker :range="addPickerList" :value="addPickerIndex" @change="bind_add_picker_change" range-key="label">
								<view class="icon-btn">
									<u-icon name="plus" color="#999999" size="14"></u-icon>
								</view>
							</picker>
							
							<view class="icon-btn ml15" :class="detail.open?'active':''" @click="toggle()">
								<u-icon :name="detail.open?'arrow-up':'arrow-down'" :color="detail.open?'#ffffff':'#999999'"
									size="14"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="detail.open">
				<u-line></u-line>
				<template v-for="(v,i) in detail.child">
					<view class="item-2">
						<view class="flex">
							<view class="flex-1 flex">
								{{v.dish_top_category_name}} ({{v.child.length}})
							</view>
							<view class="" style="width: 60px">
								<view class="flex" style="justify-content: flex-end;">
									<view class="icon-btn" @click="add(detail.dinner_type_id,v.dish_top_category_id)">
										<u-icon name="plus" color="#999999" size="14"></u-icon>
									</view>
									<view class="icon-btn ml15" :class="v.open?'active':''" @click="toggle(i)">
										<u-icon :name="v.open?'arrow-up':'arrow-down'" :color="v.open?'#ffffff':'#999999'"
											size="14"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="" v-show="v.open">						
						<view v-for="(item,index) in detail.child[i].child">
							<view class="plan-col-wrap plan-col-dish-wrap">
								<template v-for="col in hd">
										<view :style="[col.style]" class="plan-col-item dish-item" v-if="col.key == 'dish_num_id'">
											<view class="text-center">
												{{item.dish_num_name}}
											</view>
										</view>
										<view :style="[col.style]" :class="['plan-col-item','dish-item',detailindex+'||'+i+'||'+index+'||'+col.key+'_key_id' == focus.key?'active':'']" @click="bindDish(item[col.key+'_key_id'],i,index,col.key+'_key_id')" v-else>
											<view class="text-center">
												{{item[col.key+'_key_id']?item[col.key+'_key_id'][1]:''}}
											</view>
										</view>
								</template>
							</view>
							<u-line></u-line>
						</view>
						<u-line></u-line>
					</view>
				</template>
			</view>
		</view>
		<view class="blank20"></view>
	</view>
</template>

<script>
	import {
		one_day_kpi_report_detail,
		save_one_day_sales_cost_detail,
		common_write,
		common_create,
		common_delete
	} from '@/common/api.js';
	export default {
		name: "dn-item",
		props: {
			detailindex:Number,
			detail: Object,
			// open:Boolean,
			hd:Array,
			focus:Object,
			// date:String,
			// readonly:Boolean,
			// modelname:String,
			// dinners:Array,
			// sales:Array,
			// cfg:Object,
			// division:Array
		},
		data() {
			return {
				// id: this.detail.id,
				addPickerIndex:0,
			};
		},
		watch: {
			
		},
		created(){
			// if(this.show){
			// 	this.detail.child.forEach((v,i)=>{
			// 		this.showObj[i] = this.show;
			// 	})
			// }
			
		},
		computed:{
			addPickerList(){
				let dish_top_category = this.$store.getters.get_dish_top_category;
				let list = dish_top_category.map(v=>{return {
					id:v.id,
					label:v.name_cn
				}})
				return list;
			}
		},
		filters: {

		},
		methods: {
			bind_add_picker_change(e){
				let index = e.detail.value;
				this.addPickerIndex = index;
				let dinner_type_id = this.detail.dinner_type_id;
				let dish_top_category_id = this.addPickerList[index].id;
				this.add(dinner_type_id,dish_top_category_id);
			},
			bindDish(dish,i,index,colKey){
				let rowTopIndex = this.detailindex;
				let rowSecIndex = i;
				let rowIndex = index;
				let dinner_type_id = this.detail.dinner_type_id;
				let dinner_type_name = this.detail.dinner_type_name;
				let dish_top_category_id = this.detail.child[i].dish_top_category_id;
				let dish_top_category_name = this.detail.child[i].dish_top_category_name;
				let dish_num_id = this.detail.child[i].child[rowIndex].dish_num_id;
				let dish_num_name = this.detail.child[i].child[rowIndex].dish_num_name;
				this.$emit("bindDish",{dish,dinner_type_id,dinner_type_name,dish_top_category_id,dish_top_category_name,rowTopIndex,rowSecIndex,rowIndex,colKey,dish_num_id,dish_num_name});
			},
			resetItem(i){
				let data = JSON.parse(JSON.stringify(this.detail.childs[i]));
				this.$emit("reset",data);
				this.detail.childs[i] = data;
				this.price[i] = data.price;
				this.qty[i] = data.sales_qty;
			},
			save(i){
				// let checkTimeValue = {};
				// this.$emit("checkTime",checkTimeValue);
				// if(!checkTimeValue.value){
				// 	return;
				// }
				if(this.errorsQty[i]){
					uni.$u.toast('请输入正确的用餐');
					return;
				}
				if(this.errorsPrice[i]){
					uni.$u.toast('请输入正确的单价');
					return;
				}
				let init_data = JSON.parse(JSON.stringify(this.detail.childs[i]));
				let data = JSON.parse(JSON.stringify(this.detail.childs[i]));
				// console.log(data);
				data.cus_loc_id = data.cus_loc_id[0];
				data.dinner_type_id = data.dinner_type_id[0];
				data.sales_category_id = data.sales_category_id[0];
				init_data.price = data.price = Number(this.price[i]);
				init_data.sales_qty = data.sales_qty = Number(this.qty[i]);
				if(!data.dinner_type_id){
					uni.$u.toast('请选择餐别');
					return;
				}
				if(!data.sales_qty){
					uni.$u.toast('请输入用餐');
					return;
				}
				if(!data.price){
					uni.$u.toast('请输入单价');
					return;
				}
				this.$set(this.loadingId,data.id, true);
				let isVirtualId = this.isVirtualId(data.id);
				if(isVirtualId){
					data.date = this.date;
					common_create({
						model_name:this.modelname,//'sales_record',
						vals_list:[data]
					},{custom:{catch:true}}).then((res) => {
						let newId = res.result[data.id].id;
						this.detail.childs[i].sales_qty = data.sales_qty;
						this.detail.childs[i].price = data.price;
						this.detail.childs[i].id = newId;
						let diff = this.sales_price - this.old_sales_price;
						let diffQty = this.sales_qty - this.old_sales_qty;
						// console.log(this.sales_qty);
						// console.log(this.old_sales_qty);
						this.$emit("updata",init_data,newId,diff,diffQty);
						this.old_sales_price = this.get_sales_price();
						this.old_sales_qty = this.get_sales_qty();
					}).catch((res) => {
						this.resetItem(i);
					}).finally(() => {
						// console.log('finally');
						setTimeout(()=>{
							this.$set(this.loadingId,data.id, false)
						},500)
					})
				}else{
					common_write({
						model_name:this.modelname,
						vals_list:[data]
					},{custom:{catch:true}}).then((res) => {
						let diff = this.sales_price - this.old_sales_price;
						let diffQty = this.sales_qty - this.old_sales_qty;
						this.$emit("updata",init_data,0,diff,diffQty);
						this.old_sales_price = this.get_sales_price();
						this.old_sales_qty = this.get_sales_qty();
					}).catch(() => {
						this.resetItem(i);
					}).finally(() => {
						setTimeout(()=>{
							this.$set(this.loadingId,data.id, false)
						},500)
					})
				}
			},
			add(dinner_type_id,dish_top_category_id){
				this.$emit("add",dinner_type_id,dish_top_category_id);
			},
			del(index){
				let data  = this.detail.childs[index];
				if(this.isVirtualId(data.id)){
					this.remove(index);
					return;
				}
				let name = data.dinner_type_id[1] + '[' + data.sales_category_id[1] +']';
				this.$store.dispatch('modal', '确认删除 '+name+'？').then(() => {
					this.$set(this.loadingId,data.id, true)
					common_delete({
						model_name:this.modelname,
						ids:[data.id]
					},{custom:{catch:true}}).then((res) => {
						this.remove(index);
					}).catch(() => {
					
					}).finally(() => {
						setTimeout(()=>{
							this.$set(this.loadingId,data.id, false)
						},500)
					})
				})
				
			},
			remove(index){
				this.detail.childs = this.detail.childs.filter((v,i)=>i != index);
				this.price = this.price.filter((v,i)=>i != index);
				this.qty = this.qty.filter((v,i)=>i != index);
				this.errorsQty = this.errorsQty.filter((v,i)=>i != index);
				this.errorsPrice = this.errorsPrice.filter((v,i)=>i != index);
				this.tipsQty = this.tipsQty.filter((v,i)=>i != index);
				let diff = this.sales_price - this.old_sales_price;
				let diffQty = this.sales_qty - this.old_sales_qty;
				this.$emit("updata",0,0,diff,diffQty);
				this.old_sales_price = this.get_sales_price();
				this.old_sales_qty = this.get_sales_qty();
			},

			toggle(i) {
				let rowTopIndex = this.detailindex;
				if(typeof i == 'undefined'){
					this.$emit("open",rowTopIndex,undefined,!this.detail.open);
					return;
				}
				this.$emit("open",rowTopIndex,i,!this.detail.child[i].open);
				// this.showObj[i] = !this.showObj[i];
				// this.$forceUpdate();
				
			},
		}

	}
</script>

<style>
	.item{
		padding: 8px 10px;		
	}
	.item-2{
		padding: 5px 40px;	
	}
	.plan-col-dish-wrap{
		height: 50px;
	}
	.dish-item.active{
		background-color: #00AD2E;
		color: #ffffff;
	}

</style>